<script setup lang="ts">
import AMapLoader from '@amap/amap-jsapi-loader'
import { onMounted } from 'vue'

const _key = '76c16889f1d23d32bc11c6db58e3bf52' // 建议从环境变量读取

onMounted(() => {
  initMap()
})

function initMap() {
  AMapLoader.load({
    key: _key,
    version: '2.0', // 推荐指定版本
    plugins: ['AMap.TileLayer.Satellite'], // 按需加载插件，例如: ['AMap.ToolBar', 'AMap.Scale']
  })
    .then((AMap) => {
      const map = new AMap.Map('container', {
        viewMode: '3D', // 3D 模式才能显示卫星地图
        zoom: 7,
        // 阿坝自治州：31.9078516, 102.2045261
        center: [102.2045261, 31.9078516],
        layers: [new AMap.TileLayer.Satellite()], // 设置卫星图层
      })
    })
    .catch((err) => {
      console.error('地图加载失败:', err)
    })
}
</script>

<template>
  <div id="container">
    <div class="header">测试</div>
  </div>
</template>

<style scoped>
#container {
  width: 100%;
  height: 100vh; /* 使用视口高度更可靠 */
  margin: 0;
  padding: 0;
}
/* 隐藏高德地图的 Logo 和版权信息 */
:deep(.amap-logo) {
  display: none !important;
  opacity: 0 !important;
}

:deep(.amap-copyright) {
  display: none !important;
  opacity: 0 !important;
}
</style>
